
import { Card, Form, Input, Button, message } from "antd";
import "./index.scss";
import { useDispatch } from "react-redux";
import { fetchLogin } from "@/store/modules/user";
import { useNavigate } from "react-router-dom";
const Login = () => {
      const dispatch = useDispatch();
      const navigator = useNavigate();

      const onFinish = async (values) => {
            // 触发异步action fetchLogin
            await dispatch(fetchLogin(values))
            // 1. 跳转到首页
            navigator("/")
            // 2. 提示一下用户
            message.success("登录成功")
      }
      return (
            <div className="login">
                  <Card className="login-container">
                        <h1>极客园</h1>
                        {/* 登录表单 */}
                        <Form onFinish={onFinish} validateTrigger="onBlur">
                              <Form.Item
                                    name="mobile"
                                    // 多条校验逻辑 先校验第一条 第一条通过之后再校验第二条
                                    rules={[
                                          {
                                                required: true, // 是否为必选字段
                                                message: '请输入手机号！',
                                          },
                                          {
                                                pattern: /^1[3-9]\d{9}$/, // 正则表达式匹配
                                                message: '请输入正确的手机号格式！'
                                          }
                                    ]}>
                                    <Input size="large" placeholder="请输入手机号" />
                              </Form.Item>

                              <Form.Item
                                    name="code"
                                    rules={[
                                          {
                                                required: true,
                                                message: '请输入验证码！',
                                          },
                                    ]}>
                                    <Input size="large" placeholder="请输入验证码" />
                              </Form.Item>

                              <Form.Item>
                                    <Button type="primary" htmlType="submit" size="large" block>
                                          登录
                                    </Button>
                              </Form.Item>
                        </Form>
                  </Card>
            </div>
      )
}
export default Login;